<template>
  <h1>这是张宇的页面</h1>
  <to-do-header @addToDo="addToDo"></to-do-header>
  <to-do-main :list="showList" @delToDo="delToDo"></to-do-main>
  <to-do-footer :lastLength="lastLength" :status="status" @updateStatus="updateStatus"></to-do-footer>
</template>
<script setup>
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';
import ToDoFooter from './components/ToDoFooter.vue';
import { ref ,computed } from 'vue';
const list = ref([
  {id:1,name:"学习vue3",done:false},
  {id:2,name:"跑步",done:true},

])
function addToDo(name){
  if(name!=""){
 list.value.push({name,done:false,id:Math.floor(Math.random()*100)});
  }
 else{
  alert("任务不能为空")
  }
}
function delToDo(id){
  //filter 遍历数组，id ！=item.id pop() shift()
  list.value=list.value.filter((item)=>item.id !=id);
}
//计算未完成任务总数
const lastLength =computed(()=>{
  return list.value.filter((item)=>!item.done).length;
});
//定义任务状态
const status =ref("所有");
const showList =computed(()=>{
  if(status.value == "所有"){
    return list.value;

  }
  if(status.value=="待办"){
    return list.value.filter((item)=> !item.done);
  
  }
  if(status.value =="完成"){
    return list.value.filter((item)=> item.done)
  }
});
function updateStatus(statuss){
  status.value=statuss;
}
</script>
<style>
</style>